<template>
  <el-header style="text-align: right;">
    <v-list-item>
      <v-toolbar-title>欢迎回来到胡图图书馆！{{ this.user_name }}</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
      <el-dropdown>
        <v-list-item-avatar>
          <img :src=user_avatar>
        </v-list-item-avatar>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item>我的图书</el-dropdown-item>
          <el-dropdown-item>退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </v-list-item>

  </el-header>
</template>

<script>
export default {
  name: "app-bar",
  data() {
    return {
      user_avatar: "",
      user_name: "",
    };
  },
  mounted() {
    (this.user_avatar = sessionStorage.getItem("avatar")),
    (this.user_name = sessionStorage.getItem("name"));
    console.log(this.user_avatar);
  },
};
</script>

<style>
</style>